<template>
  <div class="wrapper">
	  <el-container>
	        <el-aside width="250px">
				<div style="flex:1;"></div>
				<div  class="returnhome" @click="returnhome" style="margin-left: 20px; flex: 2; margin-right: 30px;cursor: pointer;"><L/></div>
				<el-footer style="flex:12; align-self: center;justify-content: center; overflow-y: scroll;">
				<div
				v-for="item in data"
				:key="item"
				>
					<el-card style="max-width: 230px;margin-top: 15px;margin-bottom: 15px;">					      
					    <p >{{item.p}}</p>
					</el-card>
					
				</div>
				</el-footer>
			</el-aside>
	        <el-container>
	          <el-header style="margin-top:6%">
				  <img src="@/assets/images/bk-logo.png"
				  height="200px"/>
				  <img src="@/assets/images/zy-logo.png"
				  height="200px" style="margin-left: 53%;"/>
			  </el-header>
	          <el-main style="position: relative;padding-left: 40px;">
				  <el-popover
				      popper-style="font-weight: 500;font-style: italic;color: #efefef;background-color: rgb(0, 0, 0,0.3) ;border: 0;border-radius: 10px;"
				      placement="right"
				      trigger="hover"
				      content="BOSS——汪彦峰"
				    >
				      <template #reference>
				        <div class="member" style="position: absolute; top: 220px;left: 460px;">
				        	<img src="@/assets/images/wyf.jpg" class="head"/>
				        </div>
				      </template>
				    </el-popover>
				  <el-popover
				      popper-style="font-weight: 500;font-style: italic;color: #efefef;background-color: rgb(0, 0, 0,0.3) ;border: 0;border-radius: 10px;"
				      placement="right"
				      trigger="hover"
				      content="PROGRAMMER——王欣月"
				    >
				      <template #reference>
				        <div class="member" style="position: absolute; top: 10px;left: 260px;">
				        	 <img src="@/assets/images/wxy.jpg" class="head"/>
				        </div>
				      </template>
				    </el-popover>
				  <el-popover
				      popper-style="font-weight: 500;font-style: italic;color: #efefef;background-color: rgb(0, 0, 0,0.3) ;border: 0;border-radius: 10px;"
				      placement="right"
				      trigger="hover"
				      content="PROGRAMMER——黄可星"
				    >
				      <template #reference>
				       <div class="member" style="position: absolute; top: 220px;left: 60px;">
				       	  <img src="@/assets/images/hkx.jpg" class="head"/>
				       </div>
				      </template>
				    </el-popover>
				  <el-popover
				      popper-style="font-weight: 500;font-style: italic;color: #efefef;background-color: rgb(0, 0, 0,0.3) ;border: 0;border-radius: 10px;"
				      placement="right"
				      trigger="hover"
				      content="PROGRAMMER——李默雷"
				    >
				      <template #reference>
				       <div class="member" style="position: absolute; top: 10px;left: 660px;">
				       	  <img src="@/assets/images/lml.jpg" class="head"/>
				       </div>
				      </template>
				    </el-popover>
				  <el-popover
				      popper-style="font-weight: 500;font-style: italic;color: #efefef;background-color: rgb(0, 0, 0,0.3) ;border: 0;border-radius: 10px;"
				      placement="right"
				      trigger="hover"
				      content="PROGRAMMER——王梓涵"
				    >
				      <template #reference>
				       <div class="member" style="position: absolute; top: 220px;left: 850px;">
				       	  <img src="http://127.0.0.1/src/assets/images/wzh.jpg" class="head"/>
				       </div>
				      </template>
				    </el-popover>
				  
				  
			  </el-main>
	        </el-container>
	      </el-container>
	  </div>
</template>

<script setup>
import L from '@/components/icons/left'
import router from '@/router';
	import { useRoute } from 'vue-router';
	function returnhome (){
		router.push({ name: 'Indexmainfooter' })
	}
	const data = [
		{p:"   "},
		{p:"   "},
		{p:"保康血耳｜深山珍品 · 自然馈赠——您的健康滋养专家 🌿 品牌故事｜源于自然，传承匠心 "},
		{p:"「保康血耳」诞生于湖北保康，这里气候温润、山泉清澈，是珍稀血耳生长的天然福地。我们世代守护这片山林，秉承传统古法种植，结合现代生态科技，将深山孕育的“红色瑰宝”带出秘境，只为让您品尝到大自然最纯净的馈赠。"},
		{p:"🌟 产品亮点｜独一无二的血耳魅力✅ 色如琥珀，营养更胜一筹 保康血耳因富含天然血红素而呈现独特的暗红色，比普通银耳胶质更浓、口感更软糯，富含多糖、氨基酸及多种微量元素，是滋补养颜的天然佳品。"},  
		{p:"✅ 天然原产，自然无添加  全程有机种植，无农药、无硫熏，从采摘到晾晒严格把控，每一朵血耳都保留原始风味与营养，通过权威质检认证，食用更安心。  "},
		{p:"✅ 百搭养生，四季皆宜 可炖煮甜汤、煲制药膳，或搭配桃胶、红枣等食材，胶质丰润、入口即化，一碗唤醒元气，滋养身心。"},
		{p:"🌱 核心优势｜我们为何值得信赖？1. 源头直供：自建生态种植基地，砍掉中间环节，品质与价格双重保障。  2. 传统工艺：自然晾晒，锁住营养，拒绝工业加工，还原最本真的味道。  3. 贴心服务：支持7天无理由退换，全程物流追踪，客服一对一解答食用疑问。"},
		{p:"❤️ 适合人群｜献给注重健康的您- 追求天然养颜的都市女性  - 体质虚弱、需增强免疫的亚健康人群  - 爱煲汤、注重食疗养生的家庭  - 佳节赠礼，传递健康心意 "},
		{p:"📦 承诺｜您的满意是我们的追求 我们承诺：每一朵血耳都经手工精选，包装密封防潮，附赠食谱手册，让您轻松解锁养生美味。若对品质有任何疑虑，欢迎随时联系我们，我们定不负所托！  "},
		{p:"   "},
		{p:"   "}
	]
</script>

<style scoped lang="scss">
	@keyframes disappear{
		0% {
		   opacity: 0; /* 元素在0%到40%的时间内保持完全可见 */
		   scale: 0.5;
		 }
		 40% {
		    opacity: 1; /* 元素在0%到40%的时间内保持完全可见 */
			scale: 1;
		  }
		60%{
		    opacity: 1; /* 元素在100%的时间内完全消失 */
			scale: 1;
		  }
		100%{
			opacity: 0; /* 元素在0%到40%的时间内保持完全可见 */
			scale: 0.5;
		}
	}
.wrapper{
	width: 100vw;
	height: 100vh;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	background: linear-gradient(#d1d1f4, #7db8ff);
	
}
.el-aside{
	display: flex;
	flex-direction: column;
	height: 100vh;
}
.el-header{
	height: 120px;
	padding-top: 10px;
}
.returnhome{
	color:#787878;
}
.returnhome:hover{
	color: #00aaff;
}
.returnhome:active{
	color: #787878;
}
.el-card{
	background-color: rgb(0, 0, 0,0.3) ;
	border: 0;
	border-radius: 10px;
	animation: disappear linear;
	animation-timeline: view();
}
p{
	font-weight: 500;
	font-style: italic;
	color: #efefef;
}
.el-footer::-webkit-scrollbar {
  width: 0; /* 隐藏水平滚动条 */
  height: 0; /* 隐藏垂直滚动条 */
}
.member{
	width: 220px;
	height: 220px;
	background-color: rgb(255, 255, 255,0.3);
	border-radius: 110px;
	cursor: pointer;
}
.head{
	width: 180px;
	height: 180px;
	border-radius: 90px;
	position: absolute;
	top: 20px;
	right: 20px;
	transition: width 0.3s ease, height 0.3s ease, border-radius 0.3s ease,top 0.3s ease,right 0.3s ease;
}
.head:hover{
	width: 210px;
	height: 210px;
	border-radius: 105px;
	position: absolute;
	top: 5px;
	right: 5px;
}
.el-popover{
	font-weight: 500;
	font-style: italic;
	color: #efefef;
	background-color: rgb(0, 0, 0,0.3) ;
	border: 0;
	border-radius: 10px;
}
</style>